<template>
  <transition-group class="todo-list" tag="div" appear>
    <todo-list-item
      v-for="item in todos"
      :key="item.tid"
      :completed="item.completed"
      @change-state="changeState(item.tid, $event)"
      >{{ item.value }}</todo-list-item
    >
  </transition-group>
</template>

<script>
import TodoListItem from "./TodoListItem";
export default {
  props: {
    todos: {
      type: Array,
      default: () => []
    }
  },
  components: {
    TodoListItem
  },
  methods: {
    changeState(tid, completed) {
      this.$emit("change-state", {
        tid,
        completed
      });
    }
  }
};
</script>

<style>
.v-enter,
.v-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.8s;
}
.v-leave-active {
  position: absolute;
}
.v-move {
  transition: transform 1s;
}
</style>
